<template>
  <BasicModal
    v-bind="$attrs"
    title="修改密码"
    :helpMessage="['修改后跳转登录']"
    okText="更改"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div class="py-8 bg-white flex flex-col justify-center items-center">
      <BasicForm @register="register" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema } from './pwd.data';
  import { modifyPassword } from '/@/api/preschool/user';
  import { useUserStore } from '/@/store/modules/user';

  export default defineComponent({
    components: { BasicModal, BasicForm },
    setup() {
      const [register, { validate, resetFields }] = useForm({
        size: 'large',
        baseColProps: { span: 24 },
        labelWidth: 100,
        showActionButtonGroup: false,
        schemas: formSchema,
      });
      // const [registerModal, { changeOkLoading }] = useModalInner();
      const userStore = useUserStore();
      async function handleSubmit() {
        try {
          // changeOkLoading(true);
          const values = await validate();
          const { passwordOld, passwordNew } = values;

          // TODO custom api
          console.log(passwordOld, passwordNew);
          let passwordModify = { newPassword: passwordNew, oldPassword: passwordOld };
          await modifyPassword(passwordModify);
          // changeOkLoading(false);
          userStore.logout(true);
        } catch (error) {}
      }
      const handleCancel = () => {
        resetFields();
        // closeModal();
      };

      return {
        register,
        resetFields,
        handleSubmit,
        // registerModal,
        handleCancel,
      };
    },
  });
</script>
